@charset 'utf-8';

@import 'common';

$main-fc: #ffffff;

$layawrap-main-fc:#3393df;
$layawrap-minor-fc:#5d5d5d;

@mixin h2{
    display: flex;
    align-items: center;
    margin-top: 7px;
    margin-bottom: 17px;
};

.laya-flash{
    margin-top: 50px;
    padding: 60px 0;
    background-color: #8bc01f;
    h2{
        @include h2;
        font-size: 48px;
        color: $main-fc;
        span{
            display: block;
            width: 54px;
            height: 54px;
            color: #8bc01f;
            text-align: center;
            line-height: 54px;
            margin-right: 12px;
            border-radius: 4px;
            background-color: $main-fc;
        }
    }
    .text{
        margin-left: 15px;
        .title{
            font-size: 24px;
            color: $main-fc;
            margin-bottom: 60px;
        }
        .p{
            font-size: 14px;
            color: $main-fc;
            line-height: 30px;
            margin-bottom: 20px;
        }
        .bto{
            width: 100px;
            height: 34px;
            text-align: center;
            line-height: 34px;
            background-color: #e8f2d2;
            border-radius: 4px;
            &:hover{
                cursor: pointer;
            }
            
            a{
                font-size: 14px;
                color: #92c333;
                text-decoration: none;
            }
        }
    }
}
.laya-player{
    padding: 60px 0;
    background: #3393df;
    h2{
        @include h2;
        font-size: 48px;
        color: $main-fc;
        span{
            display: block;
            width: 42px;
            height: 44px;
            font-size: 40px;
            color: #3393df;
            text-align: center;
            line-height: 44px;
            margin-right: 12px;
            border-radius: 4px;
            background: $main-fc;
            float: left;
        }
    }
    .text{
        h3{
            font-size: 24px;
            color: $main-fc;
        }
        p{
            font-size: 14px;
            color: $main-fc;
            line-height: 30px;
        }
    } 
    .pic-right{
        padding-top: 145px;
    }
}
.laya-wrapper{
    padding: 60px 0;
    .title{
        h2{
            @include h2;
            font-size: 42px;
            color: $layawrap-main-fc;
            span{
                display: block;
                width: 40px;
                height: 40px;
                font-size: 36px;
                color: #ffffff;
                text-align: center;
                line-height: 40px;
                margin-right: 12px;
                background: $layawrap-main-fc;
            }
        }
        p{
            font-size: 18px;
            color: $layawrap-minor-fc;
        }
    }
    .text{
        h3{
            font-size: 18px;
            color: $layawrap-main-fc;
            margin-top: 30px;
        }
        p{
            height: 50px;
            font-size: 14px;
            color: $layawrap-minor-fc;
            text-indent: 2em;
            line-height: 25px;
        }
    }
    .pic{
        margin-top: 40px;
    }
}
.laya-wrapper2{
    background: #f7f7f7;
}
@media only screen and (max-width: 767px){
    .laya-flash{
        .pic{
            margin-top: 20px;
        }
    }
    .laya-player{
        .pic-left{
            img{
               margin: 0 auto;
            }
        }
        .pic-right{
            padding-top: 10px;
            img{
                margin: 0 auto;
            }
        }
    }
    .laya-wrapper{
        padding-top: 0;
        .title{
            margin-top: 60px;
        }
    }
}
